<template>
  <div>
    <el-dialog
      title="新增课时"
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="讲次总数" prop="count">
          <el-select
            v-model="frontCount"
            placeholder="请选择讲次总数"
            @change="countChange"
          >
            <el-option
              v-for="(item, index) in countArr"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-for="(item, index) in ruleForm.count" :key="index">
          <el-form-item :label="classNo(item)" :prop="'name' + (index + 1)">
            <el-input
              v-model="ruleForm['name' + item]"
              placeholder="请输入讲次名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="简介" placeholder="请输入简介" prop="desc">
            <el-input
              type="textarea"
              v-model="ruleForm['desc' + item]"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { tableInsert } from '@/api/api.js'
export default {
  props: ['addClassHourShow'],
  data () {
    return {
      dialogTableVisible: false,
      frontCount: 1,
      countArr: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20
      ],
      ruleForm: {
        count: 1,
        name1: '',
        desc1: '',
        name2: '',
        desc2: '',
        name3: '',
        desc3: '',
        desc4: '',
        name4: '',
        desc5: '',
        name5: '',
        desc6: '',
        name6: '',
        desc7: '',
        name7: '',
        desc8: '',
        name8: '',
        desc9: '',
        name9: '',
        desc10: '',
        name10: ''
      },
      ruleFormCp: {},
      rules: {
        count: [{ required: true, message: '请选择总讲次', trigger: 'change' }],
        name1: [
          { required: true, message: '请输入讲次名称', trigger: 'blur' }
          // { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    this.ruleFormCp = JSON.parse(JSON.stringify(this.ruleForm))
  },
  watch: {
    addClassHourShow (val, oldVal) {
      this.dialogTableVisible = true
    },
    dialogTableVisible (val, oldVal) {
      if (!val) {
        this.$refs.ruleForm1.clearValidate()
      }
    }
  },
  methods: {
    classNo (e) {
      return '第' + e + '讲'
    },
    countChange (e) {
      this.$refs.ruleForm1.clearValidate()
      // this.ruleForm = []
      if (this.ruleForm.count < e) {
        let index = this.ruleForm.count + 1
        for (let i = index; i <= e; i++) {
          // this.ruleForm['name' + i] = ''
          // this.ruleForm['desc' + i] = ''
          this.rules['name' + i] = [
            { required: true, message: '请输入讲次名称', trigger: 'blur' }
            // { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ]
        }
      } else {
      }
      this.ruleForm.count = e
    },
    // 表单验证
    submitForm (formName) {
      this.$refs.ruleForm1.validate(valid => {
        if (valid) {
          // 新增课期
          this.addClassHour()
        } else {
          return false
        }
      })
    },
    // 添加请求
    async addClassHour () {
      let arr = []
      let sort =
        this.$parent.tableData && this.$parent.tableData.length < 1
          ? 0
          : this.$parent.tableData[this.$parent.tableData.length - 1].sort
      for (let i = 1; i <= this.ruleForm.count; i++) {
        arr.push({
          sort: i + sort,
          name: this.ruleForm['name' + i],
          description: this.ruleForm['desc' + i],
          course_id: this.$route.query.id
        })
      }
      let res = await tableInsert([
        {
          table_name: 'nice_course_lesson',
          list: arr
        }
      ])
      if (res[0]) {
        return
      }
      this.$message({
        message: '新增课时成功',
        type: 'success'
      })
      this.close()
      this.ruleForm.count = 1
      this.frontCount = 1
      this.ruleForm = JSON.parse(JSON.stringify(this.ruleFormCp))
      this.$emit('childFn', 'ture')
    },
    close () {
      this.dialogTableVisible = false
    }
  }
}
</script>
<style scoped></style>
